<template>
	<div id="app">
		<div class="container">
			<div class="code bg-white">
				<el-radio-group v-model="preview" class="ml-4">
					<el-radio label="profile" size="large">profile</el-radio>
					<el-radio label="schema" size="large">schema</el-radio>
				</el-radio-group>
				<pre class="">{{ JSON.stringify(preview == "profile" ? profile : jsonSchema, null, 2) }}</pre>
			</div>
			<JsonSchemaEditor class="schema" :value="jsonSchema" lang="zh_CN" mode="preview" :isEditer="true" :jsonValue="profile" />
		</div>
	</div>
</template>

<script lang="ts" setup>
import JsonSchemaEditor from "@/components/JsonSchemaForm/JsonSchemaForm.vue";
const preview = ref<string>("profile");
const profile = reactive({
	name: {
		level1: {
			level11: "aaaa",
			level12: "bbb"
		}
	},
	appId: "appId"
});
const jsonSchema = reactive({
	root: {
		type: "object",
		title: "条件",
		properties: {
			name: {
				type: "string",
				title: "名称",
				description: "请输入名称",
				maxLength: 10,
				minLength: 2,
				properties: {
					level1: {
						type: "object",
						properties: {
							level11: {
								type: "string",
								title: "level11"
							},
							level12: {
								type: "string",
								title: "level12"
							},
							level13: {
								type: "string",
								title: "level12"
							},
							level14: {
								type: "string",
								title: "level12"
							}
						}
					},
					level2: {
						type: "string",
						title: "level2"
					}
				}
			},
			appId: {
				type: "integer",
				title: "应用ID"
			},
			credate: {
				type: "string",
				title: "创建日期",
				format: "date"
			}
		},
		required: ["name", "appId", "credate"]
	}
});
</script>
<style lang="scss">
.container {
	display: flex;
	margin: auto;
	.code {
		width: 400px;
	}
	.schema {
		flex: 1;
	}
}
</style>
